<template>

    <div>
        <div id="divmain">
            <!--签到-->
            <div style="width:100%;">
                <div style="width:100%;text-align:center;vertical-align:middle;">
                    <div style="margin-top:20px;">
                        <div class="circle circle-active">
                            <a class="btns radius5 darkcolor" style="line-height:100px;font-weight:bold;font-size:160%;"
                               id="btnSign" @click="aa">{{signData.status}}</a>
                        </div>
                    </div>
                    <div style="padding:5px 0 10px 0;"><span style="color:white;" id="spSignLastDayText">已经连续签到 <strong
                            id="spSignDays">{{signData.contineDay}}</strong> 天</span></div>
                </div>
            </div>
            <!--签到日历-->
            <div>
                <div class="sign-cand">
                    <div>
                        <table style="width:100%;">
                            <tbody>
                            <tr>
                                <td style="text-align:left;"><span class="darkcolor" id="spCurrentDay">{{signData.signTime}}</span>
                                </td>
                                <td style="text-align:right;">
                                    <el-button class="btns radius5 darkbcolor" id="btnHistory"
                                               style="color:white;font-size:120%;margin-right:10px;"
                                               @click="getHis"
                                               >我的签到
                                    </el-button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <el-calendar v-model="value">
                    </el-calendar>
                </div>
            </div>
        </div>
        <!--签到历史-->
        <el-dialog width="48%" :visible.sync="bpmnDialogVisible">
            <!--<div class="radius sign-history-bodymain">-->
            <!--<a id="btnPopClose" class="smallClose">&times;</a>-->
            <ul class="sign-history-head clear">
                <li>
                    <p>连续签到</p>
                    <h4 id="spLastMonthSign">{{signData.contineDay}}</h4>
                </li>
                <li>
                    <p>本月签到</p>
                    <h4 id="spMonthSign">{{signData.contineDay}}</h4>
                </li>
                <li>
                    <p>总共签到数</p>
                    <h4 id="spTotalSign">{{signData.contineDay}}</h4>
                </li>
            </ul>
            <el-table
                    :header-cell-style="{background:'#f2f2f2'}"
                    :data="signHisRes"
                    style="width: 80%">
                <el-table-column
                        prop="signTime"
                        label="签到日期"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="signIp"
                        label="ip地址"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="signPlatform"
                        label="平台">
                </el-table-column>
            </el-table>

            <!--</div>-->
            <!--<div id="divHistory" class="sign-layer">-->
            <!--<div class="sign-history-body">-->
            <!---->
            <!--</div>-->
            <!--</div>-->
        </el-dialog>
    </div>

</template>

<script>
    import {getDay, signHis, signIn} from "../../api/api";
    import { formatDate } from '@/common/dateFormate'
    export default {
        name: "SignIn1",
created(){
    getDay({
        userId: JSON.parse(sessionStorage.getItem("mockUser")).id
    }).then(res=>{
       this.signData.contineDay = res.data
    })
},
        data() {
            return {
                signData: {
                    contineDay: 0,
                    signTime: '',
                    status:'签到'
                },
                signHisRes:[],
                bpmnDialogVisible: false,
                value: new Date()
            }
        },
        // filters: {
        //     formatDate(time) {
        //         var date = new Date(time);
        //         return formatDate(date, 'yyyy-MM-dd HH:mm');
        //     }
        // },
        methods: {
            aa: function () {
                if (this.signData.status == '签到') {
                    const parameter = {
                        userId: JSON.parse(sessionStorage.getItem("mockUser")).id,
                        signIp: '',
                        signTime: new Date(),
                        signPlatform: ''
                    }
                    signIn(parameter).then(res => {
                        this.signData.status = '已签到'
                        this.signData.signTime = new Date()
                        this.signData.contineDay=this.signData.contineDay+1;
                        this.$message.success("success")
                    })

                }
            },

            getHis(){
                this.bpmnDialogVisible = true
                signHis({userId: JSON.parse(sessionStorage.getItem("mockUser")).id}).then(res=>{
                    this.signHisRes=res.data
                })
            }

        }
    }
</script>

<style scoped>
    .el-dialog {
        border: 3px #33b23f solid;
        border-radius: 5px;
        background-color: #fff;
        opacity: 1;
        height: 60%;
        max-width: 650px;
    }

    .el-table {
        margin-left: 70px;
    }

    #divmain {
        background-color: #4D56A3;
        text-align: center;
    }

    .darkcolor {
        color: #b25d06 !important;
    }

    .darkbcolor {
        background-color: #b25d06 !important;
    }

    .sign-cand {
        background-color: #FFBD66;
        padding-bottom: 10px;
        border-radius: 10px;
        max-width: 660px;
        margin: 0 auto;
    }

    .sign-cand * {
        user-select: none;
    }

    .btns {
        font-size: 150%;
        padding: 4px 10px;
        cursor: pointer;
    }

    li {
        list-style: none
    }

    .radius5 {
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px;
    }

    .sign-cand {
        background-color: #FFBD66;
        padding-bottom: 10px;
        border-radius: 10px;
        max-width: 660px;
        margin: 0 auto;
    }

    .sign-cand * {
        user-select: none;
    }

    .sign-today {
        background-color: #FFEF7E !important;
    }

    .btns {
        font-size: 150%;
        padding: 4px 10px;
        cursor: pointer;
    }

    .sign-pin {
        position: absolute !important;
        left: 0;
        top: 0;
        margin: 0;
    }

    .svg-triangle {
        width: 35px !important;
        height: 35px !important;
        margin: 0px auto;
    }

    .svg-triangle polygon {
        fill: #7ac143;
        stroke: #65b81d;
        stroke-width: 2;
    }

    #spCurrentDay {
        font-size: 120%;
        line-height: 40px;
        padding-left: 10px;
    }

    .circle {
        width: 100px;
        height: 100px;
        background-color: #FFEB42;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        margin: 0 auto;
    }

    .circle-active {
        box-shadow: 3px 3px 2px #E0A300;
    }

    .smallClose {
        color: grey;
        font-size: 140%;
        float: right;
        margin-right: 10px;
        cursor: pointer;
    }

    .sign-history-body {
        width: 100%;
        height: 100%;
        text-align: center;
        vertical-align: middle;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, .33);
    }

    .sign-history-bodymain {
        border: 3px #33b23f solid;
        border-radius: 5px;
        background-color: #fff;
        opacity: 1;
        height: 60%;
        max-width: 650px;
    }

    /*.sign-history-head { margin-top: 25px; color: #666; text-align: center; font-size: 14px }*/
    .sign-history-head {
        margin-top: 25px;
        text-align: center;
        font-size: 14px
    }

    .sign-history-head li {
        float: left;
        width: 33.33%
    }

    .sign-history-head li h4 {
        color: #33b23f;
        font-size: 40px;
        line-height: 50px
    }

    .sign-history-table {
        overflow: hidden;
        border-radius: 5px 5px 0 0;
    }

    /*.sign-history-table table { width: 100%; color: #666; text-align: center; font-size: 1pc; border-spacing: 0 }*/
    .sign-history-table table {
        width: 100%;
        text-align: center;
        font-size: 1pc;
        border-spacing: 0
    }

    .sign-history-table table th {
        width: 33.3%;
        background-color: #f2f2f2;
        text-align: center;
        line-height: 40px
    }

    .sign-history-table td {
        width: 33.3%;
        border-bottom: 1px #e5e5e5 dashed;
        line-height: 34px
    }
</style>